<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick指令</title>
</head>
<body>
        <h1 id="change"></h1>
        <button onclick="showtxt()">showtxt</button>
        <button onclick="showcolor()">showcolor</button>
        <button onclick="showsize()">showsize</button>
        <button onclick="showbackground()">showbackground</button>
        <button onclick="move()">showmove</button>
        <button onclick="radius()">radius</button>
        <button onclick="none()">none</button>
  
    <script>
        var x =  document.getElementById("change");
           function showtxt(){
            x.innerHTML = "你是猪吗?";
            x.style.display="block";
        }
           function showcolor(){
            x.style.color="yellow";
         }

           function showsize(){
            x.style.fontSize="50px";
         }

           function showbackground(){
            x.style.backgroundColor="lightskyblue";
         }

            function move(){
            x.style.position="absolute";
            x.style.bottom="30%";
            x.style.right="50%";
         }
            function radius(){
            x.style.borderRadius="20px";
         }

            function none(){
            x.style.display="none";
         }
         
    </script>
</body>
</html>